<template>
  <div style="height: 100%">
    <AHMF :asideWidth="300" :rightTitleShow="false" :AShow="false">
      <template #header>
        <topSearcher
          :searchOptions="searchOptions"
          @onQuery="onQuery"
          @onReset="onReset"
          :border="false"
        ></topSearcher>
      </template>
      <template #main>
        <!-- <div style="margin-bottom: 10px; display: flex">
          <el-button type="primary" size="small" @click="handleFn('add')"
            >新增</el-button
          >
        </div> -->

        <ETable
          :data="tableData"
          :titleObj="tableColumns"
          operateWidth="240"
          @sortFun="sortFun"
          :loading="tableLoading"
        >
          <template v-slot="{ scope }">
            <el-button
              @click="handleFn('detail', scope)"
              type="text"
              size="small"
              >详情</el-button
            >
            <el-button @click="handleFn('edit', scope)" type="text" size="small"
              >编辑</el-button
            >

            <el-button @click="stopFn(scope)" type="text" size="small">{{
              scope.enable == "停用" ? "启用" : "停用"
            }}</el-button>
          </template>
        </ETable>
      </template>
      <template #footer>
        <div class="flex">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.currPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total"
          >
          </el-pagination>
        </div>
      </template>
    </AHMF>
    <add_edit_dialog
      ref="add_edit_dialog"
      @refreshFn="getTableData"
    ></add_edit_dialog>
  </div>
</template>
<script>
import topSearcher from "@/components/topSearcher/topSearcher.vue";
import AHMF from "@/components/topSearcher/AHMF.vue";
import ETable from "@/components/ETable";
import add_edit_dialog from "./components/add_edit_dialog.vue";

import { BsFunctionApi, BsFunctionToggleByIdApi } from "@/api/fxManage";
export default {
  components: {
    AHMF,
    topSearcher,
    ETable,
    add_edit_dialog,
  },

  data() {
    return {
      //表格字段
      tableColumns: [
        {
          prop: "funcName",
          label: "函数名称",
          // sortable: "custom",
        },
        {
          prop: "funcCode",
          label: "函数标识",
        },
        { prop: "remark", label: "函数说明" },
        { prop: "paramsRemark", label: "参数说明" },
        {
          prop: "enable",
          type: "color",
          colorArr: [{ name: "停用", color: "red" }],
          label: "状态",
        },
      ],
      // 搜索字段
      searchOptions: [
        {
          type: "input",
          label: "函数标识",
          key: "funcCode",
          value: "",
        },
      ],
      tableHeight: "随便设置的字符串，只要是字符串，表格高度就会受控于外部样式",
      searchForm: {
        funcCode: "",
        sortStr: "&sortList[0].sortName=crTime&sortList[0].sortType=desc",
      },
      tableData: [],
      tableLoading: false,
      pageInfo: {
        currPage: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  mounted() {
    // this.getTableData();
  },
  methods: {
    stopFn(scope) {
      this.$confirm(
        `确认${scope.enable == "停用" ? "启用" : "停用"}吗？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        BsFunctionToggleByIdApi(scope.id).then((res) => {
          console.log(res);
          if (res.data.bcode == 0) {
            this.$message({
              type: "success",
              message: res.data.bdata || res.data.bmsg || "操作成功",
            });
            this.getTableData();
          }
        });
      });
    },
    handleFn(type, row) {
      this.$refs.add_edit_dialog.openFn(type, row);
    },
    async sortFun(obj) {
      this.pageInfo.sortList = obj;
      if (obj == "") {
        return this.getTableData();
      }
    },

    // 获取表格数据
    async getTableData() {
      this.tableLoading = true;
      // 没有排序条件
      let obj = {
        currPage: this.pageInfo.currPage,
        pageSize: this.pageInfo.pageSize,
        ...this.searchForm,
      };
      let res = await BsFunctionApi(obj);
      if (res.data && res.data.bdata.total > 0) {
        this.tableData = res.data.bdata.gdata;
        if (this.tableData && this.tableData.length > 0) {
          this.tableData.forEach((item) => {
            item.enable = item.enable == 1 ? "启用" : "停用";
          });
        } else {
          this.tableData = [];
        }

        this.pageInfo.total = res.data.bdata.total;
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
      }
      this.tableLoading = false;
    },
    onReset(searchForm) {
      console.log("重置", searchForm);
      // this.searchForm = searchForm;
      this.pageInfo.currPage = 1;
      this.onQuery(searchForm);
    },
    onQuery(searchForm) {
      console.log("查询", searchForm);
      this.searchForm = searchForm;
      this.getTableData();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageInfo.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageInfo.currPage = val;
      this.getTableData();
    },
    onSubmit() {
      console.log("submit!");
    },
    handleNodeClick(data) {
      console.log(data);
    },
    handleClick(row) {
      console.log(row);
    },
    //树节点筛选
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
  },
};
</script>
<style lang="scss" scope></style>
